﻿
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>100 Vjet - Blog & Magazine Theme</title>

	<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">

	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">

</head>
<body>
	<!-- Container -->
	<div id="container">
		<!-- Header -->
		<header class="clearfix">
			<!-- Logo -->
			<div id="logo">
				<a href="index.html"><img alt="" src="images/logo.png"></a>
			</div>
			<!-- End Logo -->

			<!-- Search Form -->
			<form action="http://www.examples.com" method="get">
		         <div id="search-bar">
			       	<input type="text" name="s" placeholder="Search" value="">
			        <input type="submit" value="">
			    </div>
		    </form>
		    <!-- End Search Form -->

		    <!-- Ads Top -->
			<div id="ads-top">
				<a href="http://themeforest.net/user/nextWPthemes/portfolio?ref=nextWPThemes"><img alt="" src="upload/ads-top.jpg"></a>
			</div>
			<!-- End Ads Top -->

		    <!-- Navigation -->
		    <nav class="navigation clearfix">
		    	<ul class="sf-menu">
		    		<li><a href="index.html" class="active">Home</a>
		    			<ul class="sub-menu">
							<li><a href="index.html">Slider 1</a></li>
							<li><a href="slider-2.html">Slider 2</a></li>
						</ul>
		    		</li>
		    		<li><a href="#">Category</a>
		    			<ul class="sub-menu">
							<li><a href="blog-right-sidebar.html">Right Sidebar</a></li>
							<li><a href="blog-left-sidebar.html">Left Sidebar</a></li>
							<li><a href="blog-without-sidebar.html">Without Sidebar</a></li>
						</ul>
		    		</li>
		    		<li><a href="#">Single Post</a>
		    			<ul class="sub-menu">
							<li><a href="singlepost-right-sidebar.html">Right Sidebar</a></li>
							<li><a href="singlepost-left-sidebar.html">Left Sidebar</a></li>
							<li><a href="singlepost-without-sidebar.html">Without Sidebar</a></li>
						</ul>
		    		</li>
		    		<li><a href="#">Pages</a>
		    			<ul class="sub-menu">
							<li><a href="typography.html">Typography</a></li>
							<li><a href="video.html">Videos</a></li>
							<li><a href="404.html">Error 404</a></li>
							<li><a href="underconstruction.html">Underconstruction</a></li>
						</ul>
		    		</li>
		    		<li><a href="shortcodes.html">Shortcodes</a></li>
		    		<li><a href="#">Features</a>
		    			<ul class="sub-menu">
		    				<li><a href="gallery.html">Gallery</a></li>
							<li><a href="#">Videos</a>
								<ul class="sub-menu">
									<li><a href="youtube.html">Youtube</a></li>
									<li><a href="vimeo.html">Vimeo</a></li>
								</ul>
							</li>
						</ul>
		    		</li>
		    		<li><a href="contact.html">Contact</a></li>
		    	</ul>
		    </nav>
		    <!-- Navigation -->

		    <!-- Sub Menu -->
		    <div id="sub-menu" class="clearfix">
		    	<ul>
					<li><a href="#">Popular</a></li>
					<li><a href="#">Newest</a></li>
					<li><a href="#">Latest</a></li>
					<li><a href="#">Submenu</a></li>
					<li><a href="http://themeforest.net/user/nextWPthemes/portfolio?ref=nextWPThemes">WP Themes</a></li>
					<li><a href="http://www.php-examples.net/">PHP Examples</a></li>
					<li><a href="#">Options</a></li>
				</ul>
		    </div>
		    <!-- Sub Menu -->
		</header>
		<!-- End Header -->

		<!-- Content -->
		<div id="content" class="clearfix">
			<div class="page-title">Shortcodes</div>

			<h4 class="shortcodes-title">Dropcaps</h4>

			<!-- Dropcap Title -->
			<div class="dropcap1">
				<h6>Dropcap one</h6>
				<p><span class="large-cap">1</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>

			<div class="dropcap1">
				<h6>Dropcap two</h6>
				<p><span class="large-cap">2</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>

			<div class="dropcap1 last">
				<h6>Dropcap three</h6>
				<p><span class="large-cap">3</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<!-- End Dropcaps -->


			<!-- Shortcodes Title -->
			<div class="dropcap2">
				<h6>Dropcap one</h6>
				<p><span class="large-cap">A</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>

			<div class="dropcap2">
				<h6>Dropcap two</h6>
				<p><span class="large-cap">B</span>abitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>

			<div class="dropcap2 last">
				<h6>Dropcap three</h6>
				<p><span class="large-cap">C</span>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<!-- Shortcodes Title -->


			<!-- Shortcodes Title -->
			<h4 class="shortcodes-title">Columns</h4>
			<!-- End Shortcodes Title -->


			<!-- Columns 2 -->
			<div class="col-2">
				<h5>One half</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.</p>
			</div>
			<div class="col-2 last">
				<h5>One half</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.</p>
			</div>
			<!-- Columns 2 -->


			<!-- Columns 3 -->
			<div class="col-3">
				<h5>One third</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
			</div>
			<div class="col-3">
				<h5>One third</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
			</div>
			<div class="col-3 last">
				<h5>One third</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim</p>
			</div>
			<!-- End Columns 3 -->


			<!-- Columns 4 -->
			<div class="col-4">
				<h5>One foruth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-4">
				<h5>One foruth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-4">
				<h5>One foruth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-4 last">
				<h5>One foruth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<!-- End Columns 4 -->

			<!-- Columns 5 -->
			<div class="col-5">
				<h5>One fifth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-5">
				<h5>One fifth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-5">
				<h5>One fifth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-5">
				<h5>One fifth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<div class="col-5 last">
				<h5>One fifth</h5>
				<p>Habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dapibus tincidunt blandit.</p>
			</div>
			<!-- End Columns 5 -->

			<!-- Buttons -->
			<h4 class="shortcodes-title">Buttons</h4>
			
			<a class="button-red">Button</a>
			<a class="button-yellow">Button</a>
			<a class="button-green">Button</a>
			<a class="button-blue">Button</a>
			<a class="button-gray">Button</a>
			<a class="button-black" style="margin-right: 0px;">Button</a>
			<a class="button-violet">Button</a>
			<a class="button-oqean">Button</a>
			<a class="button-dark-violet">Button</a>
			<a class="button-gold">Button</a>
			<a class="button-light-green">Button</a>
			<a class="button-brown" style="margin-right: 0px;">Button</a>
			<!-- End Buttons -->

			<!-- Spance 20px -->
			<div class="space"></div>
			<!-- End Space 20px -->

				<!-- Lists -->
			<h4 class="shortcodes-title">Lists</h4>
			<ul class="bullet-list">
				<li>Habitant morbi tristique senectus et netus et</li>
				<li>Mauris Tincidunt blandit proin dictum augue</li>
				<li>Porta odio dignissim id semper magna</li>
			</ul>
			<ul class="link-list">
				<li>Habitant morbi tristique senectus et netus et</li>
				<li>Mauris Tincidunt blandit proin dictum augue</li>
				<li>Porta odio dignissim id semper magna</li>
			</ul>
			<ul class="map-list">
				<li>Habitant morbi tristique senectus et netus et</li>
				<li>Mauris Tincidunt blandit proin dictum augue</li>
				<li>Porta odio dignissim id semper magna</li>
			</ul>
			<ul class="arrow-list">
				<li>Habitant morbi tristique senectus et netus et</li>
				<li>Mauris Tincidunt blandit proin dictum augue</li>
				<li>Porta odio dignissim id semper magna</li>
			</ul>
			<!-- End Lists -->


			<!-- Tabs -->
			<h4 class="shortcodes-title">Tabs</h4>

			<div class="tabs">
				<ul>
					<li class="active"><a href="#tab1">Tab 1</a></li>
					<li><a href="#tab2">Tab 2</a></li>
					<li><a href="#tab3">Tab 3</a></li>
				</ul>
				
				<div id="tab1" class="active">
					<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed consectetur justo rutrum. Integer sed diam ante, a varius lectus. Maecenas iaculis varius turpis id ultricies. Nullam rhoncus eros eu arcu pellentesque sit amet elementum erat mollis. Nulla facilisi.</p>
				</div>

				<div id="tab2">
					<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed consectetur justo rutrum. Integer sed diam ante, a varius lectus. Maecenas iaculis varius turpis id ultricies. Nullam rhoncus eros eu arcu pellentesque sit amet elementum erat mollis. Nulla facilisi.</p>
				</div>

				<div id="tab3">
					<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed.</p>
				</div>
			</div>
			<!-- End Tabs -->

			<!-- Toggles Style 1 -->
			<h4 class="shortcodes-title">Toggles</h4>

			<div class="toggle-style-1">
				<ul>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.
Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.
Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.
Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida.
Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
				</ul>
			</div>
			<!-- End Toggles Style 1 -->

			<!-- Toggles Style 2 -->
			<div class="toggle-style-2" style="margin-right: 0px">
				<ul>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
					<li>
						<h6>Dolor sit amet</h6>
						<div class="inner">
							<p>Turpis egestas. Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada gravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat...</p>
						</div>
					</li>
				</ul>
			</div>
			<!-- End Toggles Style 2 -->

			<!-- Message Boxes -->
			<h4 class="shortcodes-title">Message Boxes</h4>

			<div class="message-box-1">
				<h6>Turpi egestas</h6>
				<p>Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada ravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed </p>
			</div>

			<div class="message-box-2">
				<h6>Turpi egestas</h6>
				<p>Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada ravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed </p>
			</div>

			<div class="message-box-3">
				<h6>Turpi egestas</h6>
				<p>Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada ravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed </p>
			</div>

			<div class="message-box-4">
				<h6>Turpi egestas</h6>
				<p>Mauris dapibus tincidunt blandit. Proin dictum augue porta odio dignissim id semper magna aliquam. In vestibulum malesuada ravida. Duis feugiat rutrum libero, a condimentum orci faucibus id. Suspendisse consequat fringilla accumsan. In eu lacus urna, quis sagittis nibh. Vivamus eleifend ipsum posuere felis tincidunt sed </p>
			</div>
			<!-- End Message Boxes -->

			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			
		</div>
		<!-- End Content -->

		<!-- Sidebar -->
		<aside id="sidebar" class="clearfix">
			<ul>
				<li class="widget widget_archive">
					<h3 class="widget-title">Archive</h3>
					<ul>
						<li><a href="#" title="May 2012">May 2012</a>&nbsp;(6)</li>
						<li><a href="#" title="June 2012">June 2012</a>&nbsp;(46)</li>
						<li><a href="#" title="July 2012">July 2012</a>&nbsp;(15)</li>
						<li><a href="#" title="August 2012">August 2012</a>&nbsp;(46)</li>
						<li><a href="#" title="September 2012">September 2012</a>&nbsp;(96)</li>
						<li><a href="#" title="Octomber 2012">Octomber 2012</a>&nbsp;(112)</li>
						<li><a href="#" title="November 2012">November 2012</a>&nbsp;(135)</li>
						<li><a href="#" title="December 2012">December 2012</a>&nbsp;(153)</li>
					</ul>
				</li>
				<li class="widget widget_tag_cloud">
					<h3 class="widget-title">Tags</h3>
					<div class="tagcloud">
						<a href="#" title="3 topics" style="font-size: 22pt;">business</a>
						<a href="#" title="1 topic" style="font-size: 8pt;">Computers</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">css</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">design</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">graphics</a>
						<a href="#" title="1 topic" style="font-size: 8pt;">html</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">jQuery</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">themes</a>
						<a href="#" title="2 topics" style="font-size: 16.4pt;">Video</a>
						<a href="#" title="1 topic" style="font-size: 8pt;">video</a>
						<a href="#" title="1 topic" style="font-size: 8pt;">website</a>
					</div>
				</li>
			</ul>
		</aside>
		<!-- End Sidebar -->

		<!-- Footer -->
		<footer class="clearfix">
			<!-- Footer widgets -->
			<ul>
				<li>
					<h3 class="widget-title">Flicker Gallery</h3>
        			<div class="flickr-widget">
        				<a href="#"><img alt="" src="upload/flicker-1.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-2.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-3.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-4.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-5.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-6.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-7.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-8.jpg"></a>
        				<a href="#"><img alt="" src="upload/flicker-9.jpg"></a>
        			</div>
				</li>
				<li>
					<h3 class="widget-title">Twitter Feed</h3>
		        	<div class="twitter-widget">
		        		<ul>
		        			<li>
		        				<p><a href="#">about 25 days ago</a> Lorem ipsum dolor sit amet nulla malesuda odio morbi nunc odio tristique: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
		        			</li>
		        			<li>
		        				<p><a href="#">about 32 days ago</a> Malesuda orci ultricies pharetra onec accimsan curcus nec lorem aecenas: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
		        			</li>
		        			<li>
		        				<p><a href="#">about 59 days ago</a> Socis vestibulum cing molestie malesuada odio onces accussam orci lorem: <br/><a href="#">http://bit.ly/8b0wO4</a></p>
		        			</li>
		        		</ul>
		        	</div>
				</li>
				<li>
					<h3 class="widget-title">About Us</h3>
		        	<div class="textwidget">
		        		<p><img alt="" src="upload/about-us.jpg">Lorem ipsum dolor sit amet, consec tetuer adipis cing elitraesent vestibulum molestie um sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec luctus lorem aecenas tristique orci ac semuis ultricies pharetra onec accumsan malesuada orci. Fusce feugiat males odio. Morbi nunc odio, lorem aecenas tristique orci ac semuis ultricies...</p>
		       		</div>
				</li>
			</ul>
			<!-- End Footer widgets -->

			<!-- Back to top -->
			<div id="top">
				<a href="#top">back to top</a>
			</div>
			<!-- End Back to top -->

			<!-- Copyright Message -->
			<div class="copyright">
				<p>© Copyright 2012 <a href="http://www.nextwpthemes.com">nextWPThemes</a></p>
			</div>
			<!-- End Copyright Message -->
		</footer>
		<!-- End Footer -->
	</div>
	<!-- End Container -->

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.superfish.js"></script>
	<script type="text/javascript" src="js/jquery.selectbox.min.js"></script>
	<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	
	<script type="text/javascript">
		 var _gaq = _gaq || [];
		 _gaq.push(['_setAccount', 'UA-31561727-1']);
		 _gaq.push(['_trackPageview']);

		 (function() {
		   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		 })();
	</script>
</body>
</html>